<template>
	<view class="food-supermarket-container">
		<!-- 背景图片区域 -->
		<view class="banner-container">
			<image class="banner-image" src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/%E9%A4%90%E9%A5%AEbanner%403x.png" mode="aspectFit"></image>
			
			<!-- 浮动头部区域 -->
			<view class="floating-header">
				<view class="header-left">
					<image class="logo-image" src="/static/images/利行·餐超@3x.png" mode="aspectFit"></image>
				</view>
				<view class="header-right" @click="goToOrders">
					<image class="order-icon" src="/static/images/Frame 2085666556@3x.png" mode="aspectFit"></image>
					<text class="order-text">订单</text>
				</view>
			</view>
		</view>
		
		<!-- 排序筛选面板 -->
		<view class="sort-filter-panel" v-if="showSortPanel">
			<!-- 排序逻辑 -->
			<view class="filter-section">
				<text class="section-title">排序逻辑</text>
				<view class="option-row">
					<view 
						class="option-tag" 
						:class="{ 'active': selectedSortLogic === 'distance' }"
						@click="selectSortLogic('distance')"
					>距离优先</view>
				</view>
			</view>
			
			<!-- 营业状态 -->
			<view class="filter-section">
				<text class="section-title">营业状态</text>
				<view class="option-row">
					<view 
						class="option-tag" 
						:class="{ 'active': selectedBusinessStatus === 'all' }"
						@click="selectBusinessStatus('all')"
					>全部</view>
					<view 
						class="option-tag" 
						:class="{ 'active': selectedBusinessStatus === 'open' }"
						@click="selectBusinessStatus('open')"
					>营业中</view>
					<view 
						class="option-tag" 
						:class="{ 'active': selectedBusinessStatus === 'closed' }"
						@click="selectBusinessStatus('closed')"
					>休息中</view>
				</view>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<view class="reset-btn" @click="resetFilters">重置</view>
				<view class="confirm-btn" @click="confirmFilters">确定</view>
			</view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content" :class="{ 'content-masked': showSortPanel }">
			<!-- 遮罩层 -->
			<view class="panel-mask" v-if="showSortPanel" @click="showSortOptions"></view>
			<!-- 筛选栏 -->
			<view class="filter-bar">
				<view class="filter-tag" @click="selectLocation">
					<image class="filter-icon" src="/static/images/icon_canchao_location@3x.png" mode="aspectFit"></image>
					<text class="filter-text">瑞福大楼</text>
				</view>
				<view class="filter-tag" @click="showSortOptions">
					<text class="filter-text">排序/筛选</text>
					<image class="filter-icon-2" src="/static/images/icon_canchao_sort@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 门店列表 -->
			<view class="store-list">
				<!-- 第一个卡片特殊处理 -->
				<view class="featured-store-wrapper" v-if="storeList.length > 0">
					<view class="featured-header">
						<text class="featured-title">精选门店</text>
						<text class="featured-subtitle">附近低价好店</text>
					</view>
					<view class="featured-store-card">
						<view class="store-card-1" :class="{ 'featured-card': true }">
							<!-- 门店信息行 -->
							<view class="store-info-row">
								<!-- 左侧门店图片 -->
								<view class="store-image-container" @click="previewStoreImage(storeList[0].image)">
									<image class="store-image" :src="storeList[0].image" mode="aspectFill"></image>
								</view>
								
								<!-- 右侧门店信息 -->
								<view class="store-details">
									<!-- 第一行：门店名称和飞机图标 -->
									<view class="store-name-row">
										<text class="store-name">{{ storeList[0].name }}</text>
										<uni-icons type="paperplane" size="20" color="#666"></uni-icons>
									</view>
									
									<!-- 第二行：评分 -->
									<text class="store-rating" :style="{ color: storeList[0].rating ? '#ff5a2c' : '#ff5a2c' }">
										{{ storeList[0].rating || '暂无评分' }}
									</text>
									
									<!-- 第三行：距离和地址 -->
									<view class="store-location-row">
										<text class="store-distance">{{ storeList[0].distance }}</text>
										<text class="store-address">{{ storeList[0].address }}</text>
									</view>
								</view>
							</view>
							
							<!-- 商品展示区域 -->
							<view class="products-section" v-if="storeList[0].products.length > 0">
								<view class="product-item" v-for="(product, pIndex) in storeList[0].products.slice(0, 2)" :key="pIndex">
									<view class="product-name">{{ product.name }}</view>
									<view class="product-right">
										<view class="product-price">
											<text class="price-value">{{ product.price }}</text>
											<text class="price-label">门店价 ￥{{ product.originalPrice }}</text>
										</view>
										<view class="buy-button" @click="buyProduct(product)">
											<text class="buy-text">购买</text>
										</view>
									</view>
								</view>
							</view>
							<view class="no-products" v-else>
								<text class="no-products-text">暂无商品</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 其他普通卡片 -->
				<view class="store-card" v-for="(store, index) in storeList.slice(1)" :key="index">
					<!-- 门店信息行 -->
					<view class="store-info-row">
						<!-- 左侧门店图片 -->
						<view class="store-image-container" @click="previewStoreImage(store.image)">
							<image class="store-image" :src="store.image" mode="aspectFill"></image>
						</view>
						
						<!-- 右侧门店信息 -->
						<view class="store-details">
							<!-- 第一行：门店名称和飞机图标 -->
							<view class="store-name-row">
								<text class="store-name">{{ store.name }}</text>
								<uni-icons type="paperplane" size="20" color="#666"></uni-icons>
							</view>
							
							<!-- 第二行：评分 -->
							<text class="store-rating" :style="{ color: store.rating ? '#ff5a2c' : '#ff5a2c' }">
								{{ store.rating || '暂无评分' }}
							</text>
							
							<!-- 第三行：距离和地址 -->
							<view class="store-location-row">
								<text class="store-distance">{{ store.distance }}</text>
								<text class="store-address">{{ store.address }}</text>
							</view>
						</view>
					</view>
					
					<!-- 商品展示区域 -->
					<view class="products-section" v-if="store.products.length > 0">
						<view class="product-item" v-for="(product, pIndex) in store.products.slice(0, 2)" :key="pIndex">
							<view class="product-name">{{ product.name }}</view>
							<view class="product-right">
								<view class="product-price">
									<text class="price-value">{{ product.price }}</text>
									<text class="price-label">门店价 ￥{{ product.originalPrice }}</text>
								</view>
								<view class="buy-button" @click="buyProduct(product)">
									<text class="buy-text">购买</text>
								</view>
							</view>
						</view>
					</view>
					<view class="no-products" v-else>
						<text class="no-products-text">暂无商品</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getRestaurantList } from '@/api/charging'

export default {
	name: 'FoodSupermarket',
	data() {
		return {
			// 排序筛选面板相关
			showSortPanel: false,
			selectedSortLogic: 'distance', // 排序逻辑：distance-距离优先
			selectedBusinessStatus: 'all', // 营业状态：all-全部, open-营业中, closed-休息中
			
			storeList: [
				{
					name: '瑞福大楼美食城',
					image: '/static/images/store1.jpg',
					rating: '4.8分',
					distance: '500m',
					address: '上海市浦东新区张江高科技园区',
					products: [
						{
							name: '红烧肉套餐',
							price: '¥28',
							originalPrice: '32'
						},
						{
							name: '宫保鸡丁',
							price: '¥22',
							originalPrice: '26'
						}
					]
				},
				{
					name: '张江美食广场',
					image: '/static/images/store2.jpg',
					rating: '4.5分',
					distance: '800m',
					address: '上海市浦东新区张江高科技园区',
					products: [
						{
							name: '麻辣香锅',
							price: '¥35',
							originalPrice: '40'
						},
						{
							name: '重庆小面',
							price: '¥18',
							originalPrice: '22'
						}
					]
				},
				{
					name: '科技园餐厅',
					image: '/static/images/store3.jpg',
					rating: '4.2分',
					distance: '1.2km',
					address: '上海市浦东新区张江高科技园区',
					products: [
						{
							name: '日式拉面',
							price: '¥32',
							originalPrice: '38'
						},
						{
							name: '韩式拌饭',
							price: '¥25',
							originalPrice: '30'
						}
					]
				}
			]
		}
	},
	onShow() {
		this.fetchRestaurantList();
	},
	methods: {
		// 获取餐厅列表
		fetchRestaurantList() {
			const params = {
				status: this.selectedBusinessStatus === 'all' ? '' : (this.selectedBusinessStatus === 'open' ? '1' : '2'),
				sortType: this.selectedSortLogic === 'distance' ? '1' : '2',
				userLng: '130', // 默认经度，实际应该从用户位置获取
				userLat: '31',  // 默认纬度，实际应该从用户位置获取
				page: '1',
				rows: '10'
			};
			
			getRestaurantList(params).then(res => {
				console.log('餐厅列表接口返回:', res);
				if (res.code === 0 && res.data && res.data.records) {
					this.storeList = res.data.records.map(store => {
						// 格式化距离显示
						const formatDistance = (distance) => {
							if (distance >= 1000) {
								return (distance / 1000).toFixed(1) + 'km';
							}
							return distance + 'm';
						};
						
						// 格式化营业状态
						const getBusinessStatusText = (status) => {
							return status === '1' ? '营业中' : '休息中';
						};
						
						// 格式化商品数据
						const formatProducts = (products) => {
							return products.map(product => ({
								name: product.productName,
								price: '¥' + product.price,
								originalPrice: product.oldPrice ? product.oldPrice.toString() : '0',
								image: product.mainPic,
								isRecommend: product.isRecommend === 1,
								productId: product.productId,
								buyNeedKnow: product.buyNeedKnow
							}));
						};
						
						return {
							storeId: store.storeId,
							name: store.storeName,
							image: store.pic || '/static/images/store1.jpg', // 使用接口返回的门店图片
							rating: '暂无评分', // 接口没有评分字段
							distance: formatDistance(store.distance),
							address: store.address,
							contactPhone: store.contactPhone,
							workTime: store.startWorkTime + '-' + store.endWorkTime,
							featureTags: store.featureTags ? store.featureTags.split(',') : [],
							businessStatus: getBusinessStatusText(store.businessStatus),
							products: formatProducts(store.products || [])
						};
					});
					console.log('111111', this.storeList)
				}
			}).catch(err => {
				console.error('获取餐厅列表失败:', err);
			});
		},
		
		// 跳转到订单页面
		goToOrders() {
			console.log('跳转到订单页面');
			// 这里可以添加跳转逻辑
		},
		
		// 选择位置
		selectLocation() {
			console.log('选择位置');
			// 这里可以添加位置选择逻辑
		},
		
		// 显示排序选项
		showSortOptions() {
			this.showSortPanel = !this.showSortPanel;
		},
		
		// 选择排序逻辑
		selectSortLogic(logic) {
			this.selectedSortLogic = logic;
		},
		
		// 选择营业状态
		selectBusinessStatus(status) {
			this.selectedBusinessStatus = status;
		},
		
		// 重置筛选条件
		resetFilters() {
			this.selectedSortLogic = 'distance';
			this.selectedBusinessStatus = 'all';
		},
		
		// 确认筛选条件
		confirmFilters() {
			this.showSortPanel = false;
			console.log('当前筛选条件:', {
				sortLogic: this.selectedSortLogic,
				businessStatus: this.selectedBusinessStatus
			});
			// 根据筛选条件重新获取数据
			this.fetchRestaurantList();
		},
		
		// 购买商品
		buyProduct(product) {
			console.log('购买商品:', product);
			// 这里可以添加购买逻辑
		},
		
		// 预览门店图片
		previewStoreImage(imageUrl) {
			if (!imageUrl) {
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				});
				return;
			}
			
			uni.previewImage({
				urls: [imageUrl],
				current: imageUrl
			});
		}
	}
}
</script>

<style scoped>
.food-supermarket-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 背景图片区域 */
.banner-container {
	position: relative;
	height: 355rpx;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 浮动头部区域 */
.floating-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 30rpx;
}

.header-left {
	display: flex;
	align-items: center;
}

.logo-image {
	width: 200rpx;
	height: 40rpx;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.order-icon {
	width: 40rpx;
	height: 40rpx;
}

.order-text {
	font-size: 28rpx;
	font-weight: 500;
}

/* 主内容区域 */
.main-content {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	margin-top: -20rpx;
	position: relative;
	z-index: 10;
	min-height: calc(100vh - 380rpx);
	transition: all 0.3s ease;
}

/* 主内容区域遮罩状态 */
.content-masked {
	opacity: 0.6;
	pointer-events: none;
}

/* 筛选栏 */
.filter-bar {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.filter-tag {
	display: flex;
	align-items: center;
	gap: 10rpx;
	background-color: #f5f5f5;
	padding: 12rpx 12rpx;
	border-radius: 50rpx;
}

.filter-icon {
	width: 32rpx;
	height: 32rpx;
}

.filter-icon-2 {
	width: 16rpx;
	height: 16rpx;
}

.filter-text {
	font-size: 24rpx;
	color: #333;
}

/* 门店列表 */
.store-list {
	padding: 0 30rpx 30rpx;
}

/* 精选门店包装器 */
.featured-store-wrapper {
	margin-bottom: 20rpx;
}

.featured-header {
	background: linear-gradient(90deg, #FF374D 0%, #FF7E46 100%);
	border-radius: 24rpx 24rpx 0 0;
	padding: 10rpx 30rpx;
}

.featured-title {
	display: inline;
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-right: 20rpx;
}

.featured-subtitle {
	display: inline;
	font-size: 24rpx;
	color: #fff;
	opacity: 0.9;
}

.featured-store-card {
	background: linear-gradient(90deg, #FF374D 0%, #FF7E46 100%);
	border-radius: 0 0 24rpx 24rpx;
	padding: 4rpx;
}

.featured-card {
	background-color: #fff;
	border-radius: 14rpx;
	margin: 0;
	box-shadow: none;
}

.store-card {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.store-card-1 {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 门店信息行 */
.store-info-row {
	display: flex;
	margin-bottom: 20rpx;
}

.store-image-container {
	width: 20%;
	margin-right: 20rpx;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.store-image-container:active {
	opacity: 0.8;
}

.store-image {
	width: 100%;
	height: 120rpx;
	border-radius: 12rpx;
}

.store-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.store-name-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.store-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.store-rating {
	font-size: 24rpx;
	margin-bottom: 10rpx;
}

.store-location-row {
	display: flex;
	gap: 10rpx;
	align-items: center;
}

.store-distance {
	font-size: 24rpx;
	color: #666;
}

.store-address {
	font-size: 24rpx;
	color: #666;
}

/* 商品展示区域 */
.products-section {
	margin-top: 20rpx;
	padding-top: 20rpx;
}

.product-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
	padding: 20rpx 0;
}

.product-item:last-child {
	margin-bottom: 0;
}

.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
}

.product-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.product-price {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
	align-items: flex-end;
}

.price-value {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff5a2c;
}

.price-label {
	font-size: 22rpx;
	color: #999;
}

.buy-button {
	background-color: #ff5a2c;
	border-radius: 50rpx;
	padding: 8rpx 32rpx;
}

.buy-text {
	color: #fff;
	font-size: 24rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 暂无商品样式 */
.no-products {
	padding: 40rpx 0;
	text-align: center;
}

.no-products-text {
	color: #999;
	font-size: 24rpx;
}

/* 遮罩层 */
.panel-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 90;
	border-radius: 20rpx 20rpx 0 0;
}

/* 排序筛选面板 */
.sort-filter-panel {
	position: absolute;
	top: 335rpx;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 100;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.filter-section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.option-row {
	display: flex;
	gap: 20rpx;
	flex-wrap: wrap;
}

.option-tag {
	padding: 12rpx 24rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
	background-color: #f5f5f5;
	color: #666;
	transition: all 0.3s ease;
}

.option-tag.active {
	background-color: #fff3ec;
	color: #FF700A;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
}

.reset-btn {
	flex: 1;
	height: 80rpx;
	background-color: #f5f5f5;
	color: #666;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.confirm-btn {
	flex: 1;
	height: 80rpx;
	background-color: #FF6035;
	color: #fff;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: 500;
}
</style>
